<template>
  <div style="padding: 10px">
    <div>
      <el-button type="success" icon="el-icon-plus" circle="" title="添加图书" @click="open"/>
    </div>
    <div style="width: 25%;position: relative;left: 450px;display: flex">
      <el-input placeholder="请输入关键词" v-model="search"/>
      <el-button type="primary" style="margin-left: 10px" @click="load">搜索</el-button>
    </div>
    <!--表格-->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        sortable=""
        width="180"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="书名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        width="180">
      </el-table-column>
      <el-table-column
        prop="time"
        label="出版时间">
      </el-table-column>
      <el-table-column
        prop="img"
        label="封面">
        <template slot-scope="scope">

            <el-image style="width: 40%;height: 70%" :src="scope.row.img" :preview-src-list="[scope.row.img]"/>


        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格/元">
      </el-table-column>
      <el-table-column label="操作" width="130">
        <template slot-scope="scope">


          <el-button type="primary" title="编辑" @click="  handleEdit(scope.row)"
                     icon="el-icon-edit" circle></el-button>

          <!--删除-->
          <el-button @click="handleDelete(scope.row.id)" title="删除"
                     slot="reference" type="danger" icon="el-icon-delete" circle
                     style="margin-left: 10px"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--添加图书的弹窗-->
    <el-dialog
      title="添加图书"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form label-width="120px" :model="forms" :rules="rules" ref="forms">
        <el-form-item label="书名" style="font-weight: bold" prop="name">
          <el-input v-model="forms.name" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="作者" style="font-weight: bold" prop="author">
          <el-input v-model="forms.author" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="价格" style="font-weight: bold" prop="price">
          <el-input v-model="forms.price" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="上架时间" style="font-weight: bold" prop="time">
          <el-date-picker
            v-model="forms.time"
            type="datetime"
            value-format="yyyy-MM-dd hh:mm:ss"
            style="width: 80%"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
            ref="upload"
            action="http://127.0.0.1:8083/files/upload"
            :on-success="filesUploadSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>

          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addBook">确 定</el-button>
  </span>
    </el-dialog>

    <!--编辑-->

    <el-dialog
      title="更新图书"
      :visible.sync="updateDialogVisible"
      width="30%">
      <el-form label-width="120px" :model="form" >
        <el-form-item label="书名" style="font-weight: bold" prop="name">
          <el-input v-model="form.name" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="作者" style="font-weight: bold" prop="author">
          <el-input v-model="form.author" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="价格" style="font-weight: bold" prop="price">
          <el-input v-model="form.price" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="上架时间" style="font-weight: bold" prop="time">
          <el-date-picker
            v-model="form.time"
            type="datetime"
            value-format="yyyy-MM-dd hh:mm:ss"
            style="width: 80%"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
            ref="upload1"
            action="http://127.0.0.1:8083/files/upload"
            :on-success="filesUploadSuccess1"
          >
            <el-button size="small" type="primary">点击上传</el-button>

          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="updateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateBook">确 定</el-button>
  </span>
    </el-dialog>


    <!--分页-->
    <div style="margin: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import request from '../utils/request'
  import "../assets/index.css";
  export default {
    name: 'Book',
    data() {
      return {
        updateDialogVisible:false,
        form:{},
        forms: {},
        tableData: [],
        search: '',
        currentPage: 1,
        pageSize: 5,
        total: 0,
        dialogVisible: false,

        rules: {
          name: [
            { required: true, message: '请输入书名', trigger: 'blur' },

          ],
          author: [
         { required: true, message: '请输入作者', trigger: 'blur' },

       ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' },

        ],
          time: [
            { required: true, message: '请输入时间', trigger: 'blur' },

          ]
        }
      }

    },
    created() {
      this.load()
    },

    methods: {
      load() {
        request.get('/book/findPages', {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.search
          }
        }).then(res => {
          this.tableData = res.data.records
          this.total = res.data.total
        })

      },

      updateBook(){
        request.put('/book/updateBook',this.form).then(res=>{
          if (res.code===20000){
            this.$message({
              type:'success',
              message:'修改成功'
            })
            this.updateDialogVisible=false
            this.load()
          } else {
            this.$message({
              type:'error',
              message:res.msg
            })
          }
        })


      },

      //更新图书
      handleEdit(row){
        this.form = JSON.parse(JSON.stringify(row))
        this.updateDialogVisible = true
        this.$nextTick(() => {
          this.$refs['upload1'].clearFiles()
        })  //清除历史文件历史列表

      },

      //删除图书
      handleDelete(id){
        this.$confirm('你确定要删除,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          request.delete('/book/deleteBook/' + id).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.load()
          })
        }).catch(() => {
          this.$message({
            message: '已取消删除',
            type: 'success'
          })
        })
      },

      //添加图书
      addBook() {
        this.$refs['forms'].validate((valid) => {
          if (valid) {

        request.post('/book/addBook', this.forms).then(res => {
          if (res.code===20000){
            this.$message({
              type:'success',
              message:'添加成功'
            })
            this.dialogVisible=false
            this.load()
          } else {
            this.$message({
              type:'error',
              message:res.msg
            })
          }

        }) }})
      },

      open() {
        this.dialogVisible = true
        this.forms={}
        this.$nextTick(() => {
          this.$refs['upload'].clearFiles()
        })  //清除历史文件历史列表

      },

      //文件上传  更新文件
      filesUploadSuccess(res) {
        console.log(res.data)
        this.forms.img = res.data
      },

      //文件上传  更新文件
      filesUploadSuccess1(res) {
        console.log(res.data)
        this.form.img = res.data
      },

      //页码 每页的个数
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.load()
      },
      //改变当前页
      handleCurrentChange(pageNum) {
        this.currentPage = pageNum
        this.load()
      }

    }
  }
</script>

<style scoped>

</style>
